<template>
  <div class="mini-mode-view" :class="{ 'is-collapsed': !isExpanded }">
    <div class="mini-header">
      <span class="date-display">{{ formattedMiniDate }}</span>
      <div class="mini-controls">
        <button @click="toggleAlwaysOnTop" class="control-button" :class="{ 'active': isAlwaysOnTop }" title="置顶窗口">
          <span>📌</span>
        </button>
        <button @click="exitMiniMode" class="control-button" title="返回正常窗口">
          <span>&#xE922;</span>
        </button>
        <button @click="toggleExpand" class="control-button" :title="isExpanded ? '收起' : '展开'">
          <span v-if="isExpanded">&#xE70E;</span>
          <span v-else>&#xE70D;</span>
        </button>
      </div>
    </div>
    <div class="mini-content-wrapper" v-show="isExpanded">
    <div class="mini-content">
      <div v-if="todosForToday.length > 0" class="mini-todo-list">
        <div v-for="todo in todosForToday" :key="todo.id" 
             :class="['mini-todo-item', { 'completed': todo.completed }]"
        >
          <input type="checkbox" :checked="todo.completed" @change="toggleTodoStatus(todo.id)" class="mini-checkbox">
          <span 
            class="priority-indicator-mini"
            v-if="todo.priority !== undefined && todo.priority !== PRIORITIES.NONE" 
            :style="{ backgroundColor: getPriorityColor(todo.priority) }"
            :title="'优先级: ' + getPriorityText(todo.priority)"
          ></span>
          <span 
            v-if="editingTodoId !== todo.id"
            class="mini-todo-text" 
            @dblclick="startMiniEditing(todo)"
          >{{ todo.text }}</span>
          <input
            v-else
            type="text"
            class="mini-todo-edit-input"
            v-model="editingTodoText"
            @blur="saveMiniEdit(todo.id)"
            @keyup.enter="saveMiniEdit(todo.id)"
            @keyup.esc="cancelMiniEdit"
            v-focus
          />
        </div>
      </div>
      <p v-else class="no-todos-message">今日无待办</p>
    </div>
    <div class="mini-add-todo">
        <input type="text" v-model="newMiniTodoText" @keyup.enter="handleAddMiniTodo" placeholder="快速添加...">
        <button @click="handleAddMiniTodo">+</button>
      </div>
    </div>
  </div>
</template>

<script>
// const { ipcRenderer } = require('electron'); // REVERTED (Removed)
const ipcRenderer = window.electronAPI; // Using contextBridge exposed API
import Vue from 'vue'; // Import Vue for v-focus directive
import { mapGetters, mapActions, mapState } from 'vuex';
import { getFormattedDateKey } from '../utils/dateUtils';
import { getPriorityText, getPriorityColor, PRIORITIES } from '../utils/priorityUtils';

export default {
  name: 'MiniModeView',
  data() {
    return {
      newMiniTodoText: '',
      isAlwaysOnTop: false,
      isExpanded: true,
      editingTodoId: null, // For inline editing
      editingTodoText: '', // For inline editing
    };
  },
  computed: {
    ...mapState(['currentDate']),
    ...mapGetters(['todosForCurrentDate', 'formattedCurrentDateKey']),
    PRIORITIES() { // Make PRIORITIES available in template if needed for indicator
      return PRIORITIES;
    },
    todosForToday() {
      const realTodayKey = getFormattedDateKey(new Date());
      return this.$store.state.todosByDate[realTodayKey] || [];
    },
    formattedMiniDate(){
      const options = { month: 'short', day: 'numeric' , weekday: 'short'};
      return new Date().toLocaleDateString('zh-CN', options);
    }
  },
  methods: {
    ...mapActions(['toggleTodo', 'addTodo', 'updateTodoText']), // Added updateTodoText
    getPriorityText,
    getPriorityColor,
    exitMiniMode() {
      ipcRenderer.send('toggle-mini-mode-visuals', false);
      console.log('[MiniModeView.vue] Sent toggle-mini-mode-visuals with false to exit.');
    },
    toggleTodoStatus(todoId) {
      // This method is now only called by the checkbox
      this.toggleTodo(todoId);
    },
    handleAddMiniTodo(){
      if(this.newMiniTodoText.trim()){
        this.$store.dispatch('addTodoToDate', {
          text: this.newMiniTodoText.trim(),
          date: new Date(),
          priority: PRIORITIES.NONE
        });
        this.newMiniTodoText = '';
      }
    },
    toggleAlwaysOnTop() {
      this.isAlwaysOnTop = !this.isAlwaysOnTop;
      ipcRenderer.send('toggle-always-on-top', this.isAlwaysOnTop);
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      ipcRenderer.send('toggle-mini-expand', this.isExpanded);
    },
    startMiniEditing(todo) {
      this.editingTodoId = todo.id;
      this.editingTodoText = todo.text;
    },
    saveMiniEdit(todoId) {
      if (this.editingTodoId === todoId && this.editingTodoText.trim()) {
        this.updateTodoText({ todoId, newText: this.editingTodoText.trim() });
      }
      this.cancelMiniEdit();
    },
    cancelMiniEdit() {
      this.editingTodoId = null;
      this.editingTodoText = '';
    }
  },
  directives: { // Added v-focus directive
    focus: {
      inserted: function (el) {
        el.focus();
      },
      update: function(el, binding, vnode) {
        if (vnode.key === vnode.context.editingTodoId || (vnode.elm && vnode.elm.style.display !== 'none')) {
             Vue.nextTick(() => el.focus());
        }
      }
    }
  },
  created(){
    console.log('%c MiniModeView CREATED! %s', 'background: #222; color: #bada55', window.location.href);
  },
  mounted(){
    console.log('%c MiniModeView MOUNTED! %s', 'background: #222; color: #bada55', window.location.href);
  }
}
</script>

<style scoped lang="scss">
// @import '@/assets/scss/variables'; // Commenting out or removing SCSS variable imports if all are replaced by CSS vars

.mini-mode-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--d-bg-primary); /* Replaced $surface-color */
  border: var(--border-width) var(--border-style) var(--d-border-primary); /* Replaced $border-color */
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  color: var(--d-text-primary); /* Replaced $text-color-primary */
  transition: height var(--transition-duration-base) var(--transition-timing-function);
}

.mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-base);
  background-color: var(--d-bg-secondary); /* Replaced darken($surface-color, 3%) */
  -webkit-app-region: drag;
  flex-shrink: 0;
  border-bottom: var(--border-width) var(--border-style) var(--d-border-primary); /* Replaced $border-color */

  .date-display {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--d-text-primary); /* Replaced $text-color-primary */
  }

  .mini-controls {
    display: flex;
    gap: var(--spacing-sm);
    -webkit-app-region: no-drag;

    .control-button {
      font-family: "Segoe MDL2 Assets", var(--font-family-icons);
      background: transparent;
      border: none;
      color: var(--d-text-secondary); /* Replaced $text-color-secondary */
      padding: 0 var(--spacing-md);
      font-size: 12px; // Keep fixed size for mini mode icons
      height: auto;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 30px; // Keep fixed size
      outline: none;
      transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
      line-height: 1; 

      &:hover {
        background-color: var(--d-bg-hover); /* Replaced rgba($color-white, 0.1) */
        color: var(--d-text-primary); /* Replaced $text-color-primary */
      }

      &.active {
        background-color: rgba(var(--d-accent-primary-rgb), 0.2); /* Translucent accent bg */
        color: var(--d-accent-solid-base); /* Accent color for the icon */
        box-shadow: 0 0 0 3px var(--d-input-focus-ring-color); /* Consistent 3px ring, like input focus */
      }
      
      span {
        display: inline-block; 
        font-weight: var(--font-weight-normal);
      }
    }
  }
}

.mini-content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mini-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--spacing-sm) var(--spacing-base);

  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(var(--d-always-white-rgb), 0.15); /* Replaced rgba($color-white, 0.15) */
    border-radius: var(--border-radius-lg);
    &:hover {
      background-color: rgba(var(--d-always-white-rgb), 0.25); /* Replaced rgba($color-white, 0.25) */
    }
  }
}

.mini-todo-list {
  .mini-todo-item {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-sm) - var(--spacing-xs) / 2) 0; 
    font-size: var(--font-size-sm);
    border-bottom: var(--border-width) var(--border-style) var(--d-border-tertiary); 
    color: var(--d-text-primary); 
    transition: background-color var(--transition-duration-short);
    gap: var(--spacing-sm); // Added gap for consistency

    &:last-child {
      border-bottom: none;
    }

    &.completed {
      .mini-todo-text, .mini-todo-edit-input { // Apply to input as well
        text-decoration: line-through;
        color: var(--d-text-disabled); 
        font-style: italic;
      }
    }

    .mini-checkbox {
      width: 14px;
      height: 14px;
      cursor: pointer;
      flex-shrink: 0;
      background-color: transparent;
      border: var(--border-width) var(--border-style) var(--d-input-border); 
      border-radius: var(--border-radius-sm);
      appearance: none; -webkit-appearance: none;
      position: relative;
      transition: background-color var(--transition-duration-short), border-color var(--transition-duration-short);

      &:checked {
        background-color: var(--d-checkbox-radio-checked-bg); 
        border-color: var(--d-checkbox-radio-checked-bg); 
        &::before {
          content: '\2713';
          position: absolute;
          font-size: 10px;
          color: var(--d-text-on-accent); 
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      &:hover {
        border-color: var(--d-input-focus-border); 
      }
      &:focus { 
        outline: none;
        box-shadow: 0 0 0 2px var(--d-input-focus-ring-color);
      }
    }

    .priority-indicator-mini {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: var(--border-radius-circle);
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .mini-todo-text {
      flex-grow: 1;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      line-height: var(--line-height-base);
      // cursor: pointer; // Removed: No longer toggles status on click
      padding: var(--spacing-xxs) 0; // Minimal padding for alignment
      min-width: 0; // Allow shrinking
    }
    
    .mini-todo-edit-input {
      flex-grow: 1;
      padding: var(--spacing-xxs) var(--spacing-xs); // Minimal vertical, some horizontal
      font-size: var(--font-size-sm);
      color: var(--d-input-text);
      background-color: var(--d-input-bg);
      border: var(--border-width) var(--border-style) var(--d-input-border);
      border-radius: var(--border-radius-base);
      outline: none;
      line-height: var(--line-height-base);
      min-width: 0; // Allow shrinking

      &:focus {
        border-color: var(--d-input-focus-border);
        box-shadow: 0 0 0 2px var(--d-input-focus-ring-color);
      }
    }
  }
}

.no-todos-message {
  text-align: center;
  color: var(--d-text-secondary); 
  font-size: var(--font-size-sm);
  padding: var(--spacing-lg) var(--spacing-sm);
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-add-todo {
  display: flex;
  padding: var(--spacing-sm) calc(var(--spacing-sm) + var(--spacing-xs) / 2); 
  border-top: var(--border-width) var(--border-style) var(--d-border-primary); 
  background-color: var(--d-bg-secondary); 
  flex-shrink: 0;

  input[type="text"] {
    flex-grow: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--d-input-text); 
    background-color: var(--d-input-bg); 
    border: var(--border-width) var(--border-style) var(--d-input-border); 
    border-radius: var(--border-radius-base);
    outline: none;
    transition: border-color var(--transition-duration-short) var(--transition-timing-function), 
                box-shadow var(--transition-duration-short) var(--transition-timing-function),
                background-color var(--transition-duration-short) var(--transition-timing-function);
    margin-right: var(--spacing-sm);

    &::placeholder { 
      color: var(--d-input-placeholder); 
    }
    &:focus {
      border-color: var(--d-input-focus-border); 
      box-shadow: 0 0 0 3px var(--d-input-focus-ring-color); 
      background-color: var(--d-input-focus-bg); 
    }
  }

  button { // Add button
    padding: var(--spacing-xs) var(--spacing-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    background-color: var(--d-button-primary-bg); 
    color: var(--d-button-primary-text); 
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    transition: background-color var(--transition-duration-short), transform var(--transition-duration-short);
    line-height: 1;

    &:hover {
      background-color: var(--d-button-primary-hover-bg); 
      transform: scale(1.05);
}
    &:active {
      background-color: var(--d-button-primary-active-bg); 
      transform: scale(0.98);
    }
  }
}
</style> 